<template>
    <div class="layout-grid-item" ref="layoutGridItem"
        :style="{ 'border': border ? '1px solid var(--el-border-color)' : '' }">
        <el-scrollbar v-if="scrollable" :height="height + 'px'">
            <slot></slot>
        </el-scrollbar>
        <div v-else style="overflow: hidden;">
            <slot></slot>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ElScrollbar } from 'element-plus'
import { onMounted, ref, useTemplateRef } from 'vue';
interface prop {
    name: string;
    border?: boolean;
    scrollable?: boolean;
}
const { name, border = true, scrollable = true } = defineProps<prop>();
const height = ref(0)
const layoutGridItem = useTemplateRef('layoutGridItem')

onMounted(() => {
    height.value = layoutGridItem.value?.offsetHeight || 0
})
</script>
<style scoped>
.layout-grid-item {
    grid-area: v-bind(name);
    border-radius: 8px;
}

.layout-grid-item :deep(.el-scrollbar__view) {
    height: 100%;
}
</style>